<template>
	<view class="custom-tabbar">
		<!-- 患者tabBar -->
		<view v-if="userRole === 'patient'" class="tabbar-container">
			<view 
				v-for="(item, index) in patientTabBar" 
				:key="index" 
				class="tabbar-item" 
				:class="{ active: currentPath === item.pagePath }"
				@click="switchTab(item.pagePath)"
			>
				<image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" mode="aspectFit" class="tabbar-icon"></image>
				<text :class="{ active: currentPath === item.pagePath }">{{ item.text }}</text>
			</view>
		</view>
		
		<!-- 医护人员tabBar -->
		<view v-else-if="userRole === 'doctor'" class="tabbar-container">
			<view 
				v-for="(item, index) in doctorTabBar" 
				:key="index" 
				class="tabbar-item" 
				:class="{ active: currentPath === item.pagePath }"
				@click="switchTab(item.pagePath)"
			>
				<image :src="currentPath === item.pagePath ? item.selectedIconPath : item.iconPath" mode="aspectFit" class="tabbar-icon"></image>
				<text :class="{ active: currentPath === item.pagePath }">{{ item.text }}</text>
			</view>
		</view>

		<!-- 角色标识(调试用) -->
		<view class="role-debug">{{userRole}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentPath: '',
				userRole: '',
				patientTabBar: [
					{
						pagePath: 'pages/home/home',
						text: '首页',
						iconPath: '/static/tabbar/home0.png',
						selectedIconPath: '/static/tabbar/home1.png'
					},
					{
						pagePath: 'pages/assessment/risk-assessment',
						text: '风险评估',
						iconPath: '/static/tabbar/assess0.png',
						selectedIconPath: '/static/tabbar/assess1.png'
					},					{
						pagePath: 'pages/assessment/risk-report',
						text: '风险报告',
						iconPath: '/static/tabbar/report0.png',
						selectedIconPath: '/static/tabbar/report1.png'
					},
					{
						pagePath: 'pages/health/course',
						text: '健康指导',
						iconPath: '/static/tabbar/guidance0.png',
						selectedIconPath: '/static/tabbar/guidance1.png'
					},
					{
						pagePath: 'pages/my/healthIndicator',
						text: '健康指标',
						iconPath: '/static/tabbar/indicator0.png',
						selectedIconPath: '/static/tabbar/indicator1.png'
					},/* 
					{
						pagePath: 'pages/consultation/index',
						text: '咨询室',
						iconPath: '/static/tabbar/consultation.png',
						selectedIconPath: '/static/tabbar/consultation-active.png'
					}, */
					{
						pagePath: 'pages/my/profile',
						text: '我的',
						iconPath: '/static/tabbar/my0.png',
						selectedIconPath: '/static/tabbar/my1.png'
					}
				],
				doctorTabBar: [
					{
						pagePath: 'pages/doctor/home',
						text: '工作台',
						iconPath: '/static/tabbar/home.png', // 临时使用首页图标
						selectedIconPath: '/static/tabbar/home-active.png' // 临时使用首页图标
					},
					{
						pagePath: 'pages/doctor/patients',
						text: '患者管理',
						iconPath: '/static/tabbar/assessment.png', // 临时使用评估图标
						selectedIconPath: '/static/tabbar/assessment-active.png' // 临时使用评估图标
					},
					{
						pagePath: 'pages/consultation/index',
						text: '咨询室',
						iconPath: '/static/tabbar/consultation.png',
						selectedIconPath: '/static/tabbar/consultation-active.png'
					},
					{
						pagePath: 'pages/doctor/statistics',
						text: '统计',
						iconPath: '/static/tabbar/guide.png', // 临时使用指导图标
						selectedIconPath: '/static/tabbar/guide-active.png' // 临时使用指导图标
					},
					{
						pagePath: 'pages/my/profile',
						text: '我的',
						iconPath: '/static/tabbar/my0.png',
						selectedIconPath: '/static/tabbar/my1.png'
					}
				],
				// 存储所有tabBar页面路径
				allTabBarPaths: [],
				// 存储问题页面列表
				problemPages: [
					'pages/consultation/index',
					'pages/consultation/chat',
					'pages/health/index',
					'pages/my/profile',
					'pages/my/index'
				]
			};
		},
		created() {
			// 初始化所有可能的tabBar路径
			this.initTabBarPaths();
			
			// 监听路由变化
			uni.$on('route-change', this.handleRouteChange);
			// 监听tabBar更新事件
			uni.$on('update-tabbar', this.updateTabBar);
			
			// 获取用户角色
			this.getUserRole();
			
			// 初始化当前路径
			this.getCurrentPath();
			
			console.log('自定义tabBar组件已创建 - 初始角色:', this.userRole);
		},
		mounted() {
			// 在组件挂载后，设置初始显示状态
			this.updateTabBar();
			
			// 添加页面显示事件监听
/* 			uni.onTabItemTap(() => {
				console.log("Tab被点击，确保tabBar正确显示");
				this.updateTabBar();
			}); */
			
			// 监听页面显示事件
			uni.$on('page-show', () => {
				this.updateTabBar();
			});
			
			// 在应用运行期间每1秒检查一次tabBar的显示状态，确保它不会消失
			// 特别是针对聊天室、我的和健康指导等页面
			this.tabBarCheckInterval = setInterval(() => {
				this.updateTabBar();
			}, 1000);
		},
		beforeDestroy() {
			// 移除事件监听
			uni.$off('route-change', this.handleRouteChange);
			uni.$off('update-tabbar', this.updateTabBar);
			uni.$off('page-show');
			
			// 清除定时器
			if (this.tabBarCheckInterval) {
				clearInterval(this.tabBarCheckInterval);
			}
		},
		methods: {
			// 初始化所有tabBar路径
			initTabBarPaths() {
				// 合并患者和医生的tabBar路径
				this.patientTabBar.forEach(item => {
					if (!this.allTabBarPaths.includes(item.pagePath)) {
						this.allTabBarPaths.push(item.pagePath);
					}
				});
				
				this.doctorTabBar.forEach(item => {
					if (!this.allTabBarPaths.includes(item.pagePath)) {
						this.allTabBarPaths.push(item.pagePath);
					}
				});
				
				console.log('所有tabBar路径:', this.allTabBarPaths);
			},
			// 更新tabBar状态
			updateTabBar() {
				// 重新获取角色和路径
				this.getUserRole();
				this.getCurrentPath();
				
				//console.log('更新tabBar状态 - 当前路径:', this.currentPath, '角色:', this.userRole);
				
				// 确保uni.hideTabBar被调用
				uni.hideTabBar();
				
				// 针对问题页面强制显示自定义tabBar
				if (this.isProblemPage(this.currentPath)) {
					// 强制更新DOM，确保tabBar可见
					this.$forceUpdate();
					
					// 确保tabBar在问题页面上是可见的
					setTimeout(() => {
					  // 使用 uni.createSelectorQuery() 替代 document.querySelector
					  uni.createSelectorQuery()
					    .select('.custom-tabbar')
					    .node(res => {
					      if (res && res.node) {
					        // 注意：小程序/App 中直接操作 DOM 可能受限，建议通过数据驱动
					        res.node.style.display = 'block'; // 仅 Web 端有效
					      }
					    })
					    .exec();
					}, 50);
/* 					setTimeout(() => {
						const tabbarElem = document.querySelector('.custom-tabbar');
						if (tabbarElem) {
							tabbarElem.style.display = 'block';
						}
					}, 50); */
				}
			},
			// 检查当前页面是否是问题页面
			isProblemPage(path) {
				return this.problemPages.some(page => {
					if (path.startsWith('/')) {
						return path.substring(1).startsWith(page);
					}
					return path.startsWith(page);
				});
			},
			// 获取当前页面路径
			getCurrentPath() {
				const pages = getCurrentPages();
/* 				if (pages.length > 0) {
					const currentPage = pages[pages.length - 1];
					this.currentPath = currentPage.route;
					console.log('当前路径:', this.currentPath);
				} */
				  if (pages.length > 0) {
				    const currentPage = pages[pages.length - 1];
				    let route = currentPage.route;
				    if (route.startsWith('/')) {
				      route = route.substring(1);
				    }
				    this.currentPath = route;
				    //console.log('当前路径:', this.currentPath);
				  }
			},
			getUserRole() {
				if (this.userRole) return; //已经有角色就不重新设置了
				// 确保从全局App获取角色
				const app = getApp();
				if (app && app.globalData) {
					this.userRole = app.globalData.userRole || 'patient';
				} else {
					// 兜底方案，从存储中获取
					const userInfo = uni.getStorageSync('userInfo');
					if (userInfo) {
						try {
							const userData = JSON.parse(userInfo);
							this.userRole = userData.role || 'patient'; // 默认为患者角色
						} catch (e) {
							this.userRole = 'patient';
						}
					} else {
						this.userRole = 'patient';
					}
				}

				console.log('当前用户角色:', this.userRole);
			},
			// 处理路由变化
			handleRouteChange(path) {
				console.log('路由变化:', path);
				
				// 处理路径格式，确保一致性比较
				let formattedPath = path;
				if (formattedPath.startsWith('/')) {
					formattedPath = formattedPath.substring(1);
				}
				
				this.currentPath = formattedPath;
				
				// 通过延迟确保tabBar正确显示
				setTimeout(() => {
					this.updateTabBar();
				}, 100);
				
				// 对于问题页面，额外进行多次更新确保TabBar显示
				if (this.isProblemPage(formattedPath)) {
					const checkTimes = [200, 500, 1000, 2000];
					checkTimes.forEach(time => {
						setTimeout(() => {
							this.updateTabBar();
						}, time);
					});
				}
			},
			// 切换tabBar页面
			switchTab(url) {
				console.log('切换到:', url);
				
				// 格式化当前路径和目标URL以确保一致的比较
				let currentPath = this.currentPath;
				let targetUrl = url;
				
				// 如果currentPath以"/"开头，则移除
				if (currentPath.startsWith('/')) {
					currentPath = currentPath.substring(1);
				}
				
				// 如果targetUrl以"/"开头，则移除
				if (targetUrl.startsWith('/')) {
					targetUrl = targetUrl.substring(1);
				}
				
				// 如果当前页面就是要切换的页面，不做任何操作
				if (currentPath === targetUrl) return;
				
				// 先更新当前路径，防止切换过程中出现闪烁
				this.currentPath = targetUrl;
				
				// 检查是否是 tabBar 页面
				const tabBarList = this.userRole === 'patient' 
					? this.patientTabBar 
					: this.doctorTabBar;
				
				const isTabPage = tabBarList.some(item => {
					// 确保pagePath的格式与targetUrl一致进行比较
					let itemPath = item.pagePath;
					if (itemPath.startsWith('/')) {
						itemPath = itemPath.substring(1);
					}
					return itemPath === targetUrl;
				});
				
				if (isTabPage) {
					// 使用switchTab跳转到tabBar页面
					console.log('使用switchTab跳转到:', targetUrl);
					uni.redirectTo({//原本是switchTab   navigateTo
						url: '/' + targetUrl,
						success: () => {
							console.log('switchTab成功');
							// 成功后多次尝试确保tabBar显示
							[100, 300, 600].forEach(time => {
								setTimeout(() => {
									this.updateTabBar();
								}, time);
							});
						},
						fail: (err) => {
							console.error('switchTab跳转失败:', err);
							// 如果switchTab失败，尝试使用reLaunch作为后备方案
							uni.reLaunch({//原本是reLaunch
								url: '/' + targetUrl,
								success: () => {
									console.log('reLaunch成功');
									[100, 300, 600].forEach(time => {
										setTimeout(() => {
											this.updateTabBar();
										}, time);
									});
								},
								fail: (err2) => {
									console.error('reLaunch也失败:', err2);
								}
							});
						}
					});
				} else {
					// 非tabBar页面使用navigateTo
					uni.navigateTo({
						url: '/' + targetUrl,
						success: () => {
							console.log('navigateTo成功');
							// 确保在导航后tabBar能够正常显示
							setTimeout(() => {
								this.updateTabBar();
							}, 100);
						},
						fail: (err) => {
							console.error('navigateTo跳转失败:', err);
							// 尝试使用redirectTo作为后备方案
							uni.redirectTo({
								url: '/' + targetUrl,
								fail: (err2) => {
									console.error('redirectTo也失败:', err2);
								}
							});
						}
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.custom-tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background-color: #ffffff;
		box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
		z-index: 9999; /* 提高z-index，确保在最上层 */
		/* 添加安全区域 */
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box; /* 确保padding不计入高度 */
		
		.tabbar-container {
			display: flex;
			height: 100%;
			
			.tabbar-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding-top: 10rpx;
				
				.tabbar-icon {
					width: 48rpx;
					height: 48rpx;
					margin-bottom: 6rpx;
				}
				
				text {
					font-size: 24rpx;
					color: #909399;
					
					&.active {
						color: #3c9cff;
					}
				}
			}
		}
		
		/* 调试用的角色标记，可在生产环境中移除 */
		.role-debug {
			position: absolute;
			top: -30rpx;
			right: 20rpx;
			font-size: 20rpx;
			color: #999;
			background-color: rgba(255,255,255,0.8);
			padding: 2rpx 10rpx;
			border-radius: 10rpx;
			display: none; /* 默认隐藏，需要调试时设为block */
		}
	}
</style> 